<template>
  <HModal title="关联选择器定义" :visible="visible" @cancel="close" @ok="handleOK">
    <RowWrapper style="padding-right: 20px">
      <RowAttribute :span="24" label="选择器字段" :label-width="labelWidth">
        <div style="padding-top: 5px">{{ selectorFieldLabel }}</div>
      </RowAttribute>

      <RowAttribute :span="24" label="选择器按钮" :label-width="labelWidth">
        <RelationSelectorButtonNameInput :selectorField="selectorField" v-model="manual.manualSelectorButtonName"/>
      </RowAttribute>

      <RowAttribute :span="24" label="选择器列表" :label-width="labelWidth">
        <RelationShowFieldListConfig
          :includeForms="relation.relationTargetInnerFormId && relation.relationTargetInnerFormId.split(',') || []"
          :formDefinition="targetFormDefinition" v-model="manual.fieldColumns"/>
      </RowAttribute>

      <RowAttribute :span="24" label="排序设置" :label-width="labelWidth">
        <RelationFieldOrderConfig
          :includeForms="relation.relationTargetInnerFormId && relation.relationTargetInnerFormId.split(',') || []"
          v-model="manual.fieldSorts" :formDefinition="targetFormDefinition"/>
      </RowAttribute>

      <RowAttribute :span="24" label="系统条件" :label-width="labelWidth">
        <RelationSystemQueryFormula
          :source-form-definition-ids="sourceFormDefinitionIds"
          :target-form-definition-ids="targetFormDefinitionIds"
          :sourceFormDefinition="sourceFormDefinition"
          :targetFormDefinition="targetFormDefinition"
          :value.sync="manual.manualSelectorQueryFormula"
          :title.sync="manual.manualSelectorQueryFormulaTitle"/>
      </RowAttribute>

      <RowAttribute :span="24" label="筛选条件" :label-width="labelWidth">
        <RelationShowFieldListConfig
          :includeForms="relation.relationTargetInnerFormId && relation.relationTargetInnerFormId.split(',') || []"
          :formDefinition="targetFormDefinition" v-model="manual.fieldSearches"/>
      </RowAttribute>

      <a-divider type="horizontal" style="margin: 0 0 5px 0"/>
      <div style="padding-left: 35px;">
        <a-checkbox style="margin-bottom: 10px" v-show="showManualSelectorSubFormButtonConfig"
          @click="() => manual.showManualSelectorSubFormButton = !manual.showManualSelectorSubFormButton"
          :checked="!!manual.showManualSelectorSubFormButton">
          出现在明细表按钮区, 支持多选记录并插入
        </a-checkbox>
        <RelationListViewConfig style="margin-bottom: 10px" :formDefinition="targetFormDefinition" :manual="manual"/>
        <RelationFieldViewConfig style="margin-bottom: 10px" :formDefinition="targetFormDefinition" :manual="manual"/>
        <a-checkbox
          :checked="manual.manualEditTargetField"
          @click="() => manual.manualEditTargetField = !manual.manualEditTargetField">
          允许编辑选择器字段
        </a-checkbox>
      </div>
    </RowWrapper>
  </HModal>
</template>
<script>
import {createProps} from '@/utils';
import {createFormDefinition, getAllFields} from '@comp/hhd/design/FormDesigner/types';
import HModal from '@comp/hhd/HModal/HModal.vue';
import {createManual, createRelation} from '@comp/hhd/design/relation/types';
import RowWrapper from '@comp/hhd/layout/RowWrapper.vue';
import RowAttribute from '@comp/hhd/layout/RowAttribute.vue';
import RelationSelectorButtonNameInput
  from '@comp/hhd/design/relation/RelationSelectorConfig/RelationSelectorButtonNameInput.vue';
import RelationShowFieldListConfig
  from '@comp/hhd/design/relation/RelationShowFieldListConfig/RelationShowFieldListConfig.vue';
import FieldOrderConfig from '@comp/hhd/design/FormMenu/FieldOrderConfig.vue';
import RelationFieldOrderConfig from '@comp/hhd/design/relation/RelationFieldOrderConfig/RelationFieldOrderConfig.vue';
import RelationSystemQueryFormula
  from '@comp/hhd/design/relation/RelationSystemQueryFormula/RelationSystemQueryFormula.vue';
import RelationListViewConfig from '@comp/hhd/design/relation/RelationListViewConfig/RelationListViewConfig.vue';
import RelationFieldViewConfig from '@comp/hhd/design/relation/RelationFieldViewConfig/RelationFieldViewConfig.vue';

export default {
  name: 'RelationSelectorConfig',
  components: {
    RelationFieldViewConfig,
    RelationListViewConfig,
    RelationSystemQueryFormula,
    RelationFieldOrderConfig,
    FieldOrderConfig,
    RelationShowFieldListConfig,
    RelationSelectorButtonNameInput,
    HModal,
    RowWrapper,
    RowAttribute
  },
  props: {
    relation: createProps(Object, createRelation),
    sourceFormDefinition: createProps(Object, createFormDefinition),
    targetFormDefinition: createProps(Object, createFormDefinition),
  },
  data() {
    return {
      labelWidth: '120px',
      visible: false,
      manual: createManual(),
    };
  },
  methods: {
    handleOK() {
      if (!this.manual.fieldColumns || !this.manual.fieldColumns.length) {
        this.$message.warn('选择器列表不能为空');
        return;
      }
      if (this.manual.manualListPreview && !this.manual.listViewsConfigs.length) {
        this.$message.warn('请配置列表穿透视图');
        return;
      }
      if (this.manual.manualSelectorFieldPreview && !this.manual.fieldViewConfigs.length) {
        this.$message.warn('请配置字段穿透视图');
        return;
      }
      this.close();
      Object.assign(this.originManual, this.manual);
    },
    setData(manual) {
      this.manual = JSON.parse(JSON.stringify(manual));
      this.originManual = manual;
      this.open();
    },
    open() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
  },
  computed: {
    showManualSelectorSubFormButtonConfig() {
      try {
        //只有明细表的字段
        return this.manual.fieldBinds[0].sourceFormId !== this.sourceFormDefinition.id
      } catch (e) {}
      return false
    },
    sourceFormDefinitionIds() {
      try {
        return this.manual.fieldBinds[0].sourceFormId;
      } catch (e) {
      }
      return '';
    },
    targetFormDefinitionIds() {
      try {
        return this.relation.relationTargetInnerFormId;
      } catch (e) {
      }
      return '';
    },
    selectorField() {
      if (!this.manual || !this.manual.manualSelectorFieldId) return {};
      let list = getAllFields(this.sourceFormDefinition);
      let f = list.find(f => f.id === this.manual.manualSelectorFieldId);
      return f || {};
    },
    selectorFieldLabel() {
      return this.selectorField.title;
    },
  }
};
</script>